//轮播图
$(function () {
    let pagingBox = document.querySelector('.pagingBox'),
        font_box = null,
        cont = 0;

    $.get('./json/data.json', function (data) {

        strbox(data)

    })

    let strbox = function (data) {
        let str = ''
        
        data.forEach(itme => {
            cont ++
            let {
                name,
                name1,
                name2,
                leng,
                image
            } = itme;
           
           
            let ulst = '';
            if(image.length > 0){
               
                image.forEach(sun=>{
                    let imgbox = sun.img
                    ulst += `<a href="">
                    <li>
                    <img src="${imgbox}" alt="">
                    </li>    
                    </a>`
                    
                })

            }
           
           
            let strr = '';
            leng.forEach(itme=>{
                let {h4,cliemr} = itme
                let str = ''
                cliemr.forEach(itma=>{
                    let name = itma.name
                    let flag = itma.flag
                   str += `<a href="https://login.taobao.com/" class="${flag?flag:''}">${name}</a>`
                })
                strr += `<li class=".clear">
                <h4>${h4}></h4>
                <div class="">
                    ${str}
                   
                </div>
            </li>`})

            str += ` <li>
            <em class="pagem${cont}"></em>
          <a href="">${name}</a>
          
          <a href="">${name1 ? `<span>/</span>` + name1 : ''}</a>
          ${name2 ?`<span>/</span> 
          <a href="">${name2}</a>`:''}
          <div class="hideBox">
              <ul class="font_box">
              
              ${strr}
             
              

              </ul>

              <ul class="img_box">
              ${ulst}

              </ul>

          </div>

      </li> `;

        })
        pagingBox.innerHTML = str;

        font_box = document.querySelectorAll('.font_box');
 }

})

//动态切换
$(function(){
    let exhibition_box = document.querySelector('.exhibition_box'),
    bitionBox = document.querySelectorAll('.bitionBox'),
    Pager = document.querySelector('.Pager'),
    libox = Pager.querySelectorAll('li'),
    spot = 0,
    parent = 0,
    trmer = null,
    leng = bitionBox.length;
    
 function planting (){
    let box = bitionBox[spot],
     box1 = bitionBox[parent];
     box.style.opacity = '1'
     box.style.Zindex = '99'
     box.style.transition = 'all  .5s'

     function fn(){
         //box1.offsetWidth
         box1.style.opacity = '0'
         box1.style.Zindex = '0'
         box1.style.transition = '0s'
         this.removeEventListener('transitionend',fn)
     }
     box.addEventListener('transitionend',fn)
     aout(spot)
 } 

 exhibition_box.onmouseenter = ()=>{
         clearInterval(trmer)
 }
 exhibition_box.onmouseleave = ()=>{
    trmer = setInterval(()=>{
        parent = spot
       spot ++
       spot > leng - 1 ? spot = 0 : null
       planting()
    },3000)
 }
 let timea = null;
 [].forEach.call(libox,(itme,index)=>{
    
   
        itme.onmouseenter = ()=>{
        timea = setTimeout(()=>{
                parent = spot
                spot = index
                planting()
            },300)
           
        }
        itme.onmouseleave = ()=>{
            clearTimeout(timea)
        }
  
 
})

 function aout(spot){
    [].forEach.call(libox,(itma,index)=>{
        if(index === spot){
            itma.className = 'avout'
            return
        }   
       itma.className = ''
      
    })
 

 }
 
    function stetime(){
         
      trmer = setInterval(()=>{
            parent = spot
           spot ++
           spot >= leng ? spot = 0 : null
           planting()
        },3000)

    }
    stetime()
    
    
})

//动态生成换一批
$(function(){
    let cont = 0;
    let chengbox = document.querySelector('.chengbox'),
    libox = null,
    imgbox = null;
   $.get('./json/data1.json',function(data){
          strfn(data)
   });
   
 function strfn(data){
     let str = '',
     spto = 0;
     data.forEach(itme=>{
      spto ++
      let {img,span,foat,foat1} = itme.name1[cont]
     // console.log(itme.name1[0])
     
        str += `<li class='${spto < 10 ?'rotate1' : spto <= 20 ? 'rotate2': spto <= 29 ? 'rotate3':''}'>
        <a href="${foat?'javascript:;':null}">
          <div class="chenhide">
              <span>${foat||span}</span>
              <em>点击进入</em>

          </div>

          <section class="chenimgbox">
              <img src="" data_src="${foat1||img}" alt="">
          </section>
        </a>

      </li>`
     });
    
    
        chengbox.innerHTML = str
     
    
     libox = chengbox.querySelectorAll('li');
     imgbox = chengbox.querySelectorAll('.chenimgbox img')
    
     clickbox(libox,data)
   

 };


 window.onscroll = ()=>{
    slowBox(chengbox)
 }

 function clickbox(libox,data){
     
libox[libox.length - 1].onclick = ()=>{
    cont ++ 
    cont >= 3 ? cont = 0 : null;
   
    strfn(data)
    slow()

}


 }
 //图片缓加载
//插件
function offset(obj){
    let left = obj.offsetLeft,
    top = obj.offsetTop,
    parent = obj.offsetParent;
    while(parent){
        left += parent.offsetLeft + parent.clientLeft||0
        top += parent.offsetTop + parent.clientTop||0
        parent = parent.offsetParent
    }
    return{
        left,top
    }

}


 function slowBox(box){
    //窗口+卷曲
    let leng = document.documentElement.clientHeight + document.documentElement.scrollTop,
    //加载更多
    fontleng = box.clientHeight/2 + offset(box).top
    if(leng >= fontleng){
       
        slow()
    }
    

 };
 

function slow(){
    
   if(imgbox){
    [].forEach.call(imgbox,itma=>{
        let img = itma.getAttribute('data_src')
       
       let temporary = new Image()
        temporary.src = img
        temporary.onload = ()=>{
            itma.src = img
        }
       
       temporary = null
       
    })
   }

}



   

})
//选项卡
$(function(){
   let box = document.querySelector('.switch'),
   libox = box.querySelectorAll('.button_box li'),
   outbox = box.querySelectorAll('a>div'),
   cont = 0,
   leng = libox.length
  let itme = setInterval(()=>{
       cont ++
       cont >= leng  ? cont = 0 : null;
       fn()

   },5000)

   box.onmouseenter = ()=>{
       clearInterval(itme)
   }
   box.onmouseleave = ()=>{
    itme = setInterval(()=>{
        cont ++
        cont >= leng  ? cont = 0 : null;
        fn()
 
    },5000)
 
   }

   function fn(){
    [].forEach.call(libox,(itma,index)=>{
        if(cont === index){
            itma.className = 'avout';
            outbox[index].className = 'avout';
            return
        };
        itma.className = '';
        outbox[index].className = ''

    })

   }
   [].forEach.call(libox,(cur,index)=>{
        cur.onmouseenter = ()=>{
            cont = index
            fn()
        }
   })
   
})
//动态生成dom
$(function (){
    let beautiful = document.querySelector('.beautiful'),
    box = beautiful.children[2]
  $.get('./json/data2.json',function(data){
       fn(data)
  })
 function fn(data){
     let str = '';
     data.forEach(itme=>{
        let {image,p,span} = itme;
        str += ` <div class="public">
        <a href="https://login.taobao.com/">
          <img src=""  data_image="${image}" alt="">
          <p>${p}</p>
          <span>${span}</span>
        </a>
      </div>`
     })
     box.innerHTML = str

 }



})

//动态生成dom
$(function(){
    let electric = document.querySelector('.electric #minse'),
    home_box = document.querySelector('#home_box'),
    of_love = document.querySelector('#of_love'),
    outdoors = document.querySelector('#outdoors'),
    likeBox = document.querySelector('#likeBox');
  /*   $.ajax({
        url:'../json/data3.json',
        success:round=>{
            strbox(round[0].name)
            sunstr(round[1].name1)
            lovebox(round[2].name)
            fnset(round[3].name)
            fontbox(round[4].name)
        }
    }) */
    $.ajax({
        method:'get',
        url:'./json/data3.json',
        success:round =>{
            strbox(round[0].name)
            sunstr(round[1].name1)
            lovebox(round[2].name)
            fnset(round[3].name)
            fontbox(round[4].name)
        }
    })

   function strbox(data){
       let str = '';
       data.forEach(itme=>{
           let {p,span,image} = itme;
           str += `<div class="public">
           <a href="https://login.taobao.com/">
             <img src="" data_image="${image}" alt="">
             <p>${p}</p>
             <span>${span}</span>
           </a>
         </div>`

       })
       electric.innerHTML = str

   };

   function sunstr (data){
    let str = '';
    data.forEach(itme=>{
        let {p,span,image} = itme;
        str += `<div class="public">
        <a href="https://login.taobao.com/">
          <img src="" data_image="${image}" alt="">
          <p>${p}</p>
          <span>${span}</span>
        </a>
      </div>`

    })
    home_box.innerHTML = str

   };
   function lovebox(data){
    let str = '';
    data.forEach(itme=>{
        let {p,span,image} = itme;
        str += `<div class="public">
        <a href="https://login.taobao.com/">
          <img src="" data_image="${image}" alt="">
          <p>${p}</p>
          <span>${span}</span>
        </a>
      </div>`

    })
    of_love.innerHTML = str
   };

   function fnset(data){
    let str = '';
    data.forEach(itme=>{
        let {p,span,image} = itme;
        str += `<div class="public">
        <a href="https://login.taobao.com/">
          <img src="" data_image="${image}" alt="">
          <p>${p}</p>
          <span>${span}</span>
        </a>
      </div>`

    })
    outdoors.innerHTML = str

   }

   function fontbox(data){
     let str = '';
     data.forEach(itma=>{
        let {p,span,image} = itma;
        str += ` <li class="public">
        <a href="">
          <img src="" data_image="${image}" alt="">
          <p>${p}</p>
          <span>${span}</span>

        </a>

    </li>`
     })
       
    likeBox.innerHTML = str;
   let libox = likeBox.querySelectorAll('li')
   libox.forEach.call(libox,(itmes,index)=>{
    if(index === 0 || index%5 === 0){
        itmes.style.margin = 0
    }
})

   }

   

})

//浮动窗口
$(function (){
    let float_top = document.querySelector('.float_top'),
    box = document.querySelector('.float_leftBox'),
    libox = box.querySelectorAll('li'),
    
     winheight = document.documentElement.clientHeight;
    
    let ars = [].filter.call(libox,(item,index) =>{

        return index > 0 && index < libox.length - 1
    })
    $ars = $(ars)
   
    function clickbox(){
        let $this = $(this)
     let leng = winheight * $this.index() + 1000;
  

     document.documentElement.scrollTop = leng 

    }


    $ars.on('click',clickbox)


   let func = ()=>{
   // let winheight = document.documentElement.clientHeight;
    let scrTop = document.documentElement.scrollTop;
       
       


        let cont = Math.floor((scrTop - 500) / winheight)
        let colora =  cont === 1 || cont === 5 || cont === 7 ? '#3bc7b0' : cont === 2 ?
        'rgba(0, 0, 0, .9)' : cont === 3 || cont === 6 ? '#f00e65' : cont === 4 ? '#2263d4' : 
        cont === 8 ?  '#f00e65' :null
          
        if(scrTop >= winheight){
            fn()
            colorbox(cont,colora)
            
        }else{
            fn1()
        }
   }

    window.addEventListener('scroll',func)

    function fn(){
        float_top.style.top = '0px'
        float_top.style.transition = 'ease 1s'
        box.style.left = '2px'
        box.style.transition = 'ease 1s'

    }
    function fn1(){
        float_top.style.top = '-50px'
        float_top.style.transition = 'ease .5s'
        box.style.left = '-75px'
        box.style.transition = 'ease .5s'
    }

    function colorbox(cont,colora){
        cont >= libox.length -1 ? cont = libox.length - 2 : null
        for(let i = 1; i < libox.length -1 ; i++){
            if(cont === i){
                libox[i].style.backgroundColor = `${colora}`;
                continue
            }
           
            libox[i].style.backgroundColor = 'rgba(0, 0, 0, .6)'
           
             
        }


    }
    [].forEach.call(libox,(itme,i)=>{      
          let  colors = i === 1 || i === 5 || i === 7 ? '#3bc7b0' : i === 2 ?
            'rgba(0, 0, 0, .9)' : i === 3 || i === 6 ? '#f00e65' : i === 4 ? '#2263d4' : 
            i === 8 ?  '#f00e65' :null
    
    itme.onmouseenter = function(){
        this.style.backgroundColor = `${colors}`
        let $this = $(this)
        $this.siblings('.sbox').css('backgroundColor','rgba(0, 0, 0, .6)')
        //$this.siblings('li').style.backgroundColor = `rgba(0, 0, 0, .6)`
       //console.log(1)
       return
    }

    })

 libox[libox.length - 1].onclick = ()=>{
  
    let a = document.documentElement.scrollTop
       console.log(a)
       l = a/(1000/20)
     let time = setInterval(()=>{
      a -= l
      if(a <= 0){
          a = 0
          clearInterval(time)
      }
      document.documentElement.scrollTop = a 

    },20) 
    

  

 }
    
    
})
//图片缓加载

$(function (){

//插件


    setTimeout(()=>{
        let  public = document.querySelectorAll('.public')
         fn(public)
     },2000)
    
   

    function fn(data){
        function offset(obj){
            let left = obj.offsetLeft,
            top = obj.offsetTop,
            parent = obj.offsetParent;
            while(parent){
                left += parent.offsetLeft + parent.clientLeft||0
                top += parent.offsetTop + parent.clientTop||0
                parent = parent.offsetParent
            }
            return{
                left,top
            }
        
        }

        window.addEventListener('scroll',()=>{
           let leng = document.documentElement.scrollTop + document.documentElement.clientHeight/2;
            
           [].forEach.call(data,itma=>{
              let t = offset(itma).top
              if(leng >= t){
                  let box = itma.querySelector('a img')
                  let img = box.getAttribute('data_image')
                  if(img !== null){
                     
                     let linshi = new Image
                     linshi.src = img
                     linshi.onload = ()=>{

                         box.src = img
                         linshi= null
                         box.removeAttribute('data_image')
                     }

                  }else{
                      return
                  }
 
              }
           })

        })
        

    }
    

})